<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米商城</title>
		<style>
		* {
			margin: 0;
			padding: 0;
		}
		.nav-div {
			line-height: 40px;
			height: 40px;
			background-color: black;
		}
		.nav-zhz {
			width: 1226px;
			height: 40px;
			background-color: aqua;
			margin: 0 auto;
		}
		.nav-top li {
			list-style: none;
			float: left;
			margin-right: 7px;
			font-size: 12px;
			/* text-decoration: none; */
		}
		.nav-top li>a {
			text-decoration: none;
			margin-right: 7px;
			color: #b0b0b0;
		}
		.nav-top li>span {
			
		}
		.nav-gwc>ul>li {
			list-style: none;
			float: right;
			font-size: 12px;
			margin-right: 7px;
			
		}
		.nav-gwc>ul>li a {
			text-decoration: none;
			margin-right: 7px;
			color: #b0b0b0;
			
		}
		.nav-gwc>ul>li>a>img {
			width: 20px;
			
		}
		.nav-gwc>ul>li>.gwcjz {
			vertical-align: middle;
			
		}
		#milogo {
			background-image: url(img/mi_logo.png);
			height: 100px;
			background-repeat: no-repeat;
			background-position: left;
			background-size: 56px 56px;
		}
		header {
			width: 1226px;
			height: 100px;
			line-height: 100px;
			/* background-color: blue; */
			margin: 0 auto;
			position: relative;
		}
		.mibiao {
			width: 62px;
			height: 100px;
			background-image: url(img/mi_logo.png);
			background-repeat: no-repeat;
			background-position: left center;
			background-size: 56px 56px;
			float: left;
		}
		header>.header {
			background-color: #aa0000;
			height: 100px;
			width: 1130px;
			float: left;
		}
		header::after {
			content: "";
			display: block;
			clear: both;
		}
		.header ul {
			margin-left: 150px;
		}
		.header ul>li {
			list-style: none;
			float: left;
			margin-left: 23px;
		}
		.search .search1 {
			width: 300px;
			height: 50px;
			/* float: right; */
			position: absolute;
			top: 50px;
			
		}
		</style>
	</head>
	<body>
		<nav class="nav-div">
			<div class="nav-zhz">
				<ul class="nav-top">
					<li><a href="#">小米商城</a><span>|</span></li>
					<li><a href="#">MIUI</a><span>|</span></li>
					<li><a href="#">loT</a><span>|</span></li>
					<li><a href="#">云服务</a><span>|</span></li>
					<li><a href="#">天星数科</a><span>|</span></li>
					<li><a href="#">有品</a><span>|</span></li>
					<li><a href="#">小爱开放平台</a><span>|</span></li>
					<li><a href="#">企业团购</a><span>|</span></li>
					<li><a href="#">资质证照</a><span>|</span></li>
					<li><a href="#">协议规则</a><span>|</span></li>
					<li><a href="#">下载appp</a><span>|</span></li>
					<li><a href="#">智能生活</a><span>|</span></li>
					<li><a href="#">Select Location</a></li>
				</ul>
				<div class="nav-gwc">
					<ul>
						<li>
							<a href="#" class="gwcjz">
								<img src="img/购物车.png"/>购物车(0)
							</a>
						</li>
						<li><a href="#">消息通知</a></li>
						<li><a href="#">注册</a><span>|</span></li>
						<li><a href="#">登录</a><span>|</span></li>
					</ul>
				</div>
			</div>
		</nav>
		<header>
			<div class="mibiao"></div>
			<div class="header">
				<ul>
					<li>Xiaomi</li>
					<li>Redmi红米</r></li>
					<li>电视</li>
					<li>笔记本</li>
					<li>平板</li>
					<li>家电</li>
					<li>路由器</li>
					<li>服务</li>
					<li>社区</li>
				</ul>
			</div>
			<div class="search">
				<input type="search" class="search1">
			</div>
		</header>
	</body>
</html>
